<template>
  <div class='site-footer-top'>
    <div class='footer-menu'>
      <!--   左边部分   -->
      <div class='footer-left'>
        <div class='footer-tens'>
          <h6 class='footer-title'>今天是{{ websiteConfig.name }}的</h6>
          <h1 class='days'>第{{ timeDifference(websiteConfig.websiteCreateTime) }}天时光</h1>
        </div>
        <div class='footer-rand'>
          <a :href='ArticlePath.Path + randUrl' class='post'>
            <span class='title'>随机阅读「{{ randTitle }}」</span>
            {{ randArticleAbstract }}
          </a>
          <img :src='randCover' :alt='randTitle'>
        </div>
      </div>
      <!--   右边部分   -->
      <div class='footer-friends'>
        <h6 class='footer-title'>结识朋友</h6>
        <ul>
          <li v-for='(item,index) in randomLinkList' :key='index'>
            <a :href='item.linkAddress' rel='noopener' :title='item.linkIntro' target='_blank'
               class='random-ten-friends'>
              {{ item.linkName }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, reactive, toRefs,ref } from 'vue'
import api from '@/api/api'
import { useRandomArticle } from '@/stores/randomArticle'
import { useAppStore } from '@/stores/app'
import { timeDifference } from '@/utils/commonUtil'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'FooterTop',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  methods: { timeDifference },
  setup() {
    const reactiveData = reactive({
      randUrl: '' as any,
      randTitle: '' as String,
      randCover: '' as String,
      randArticleAbstract:'' as String,
      randomLinkList: [] as any
    })
    onMounted(() => {
      getRandomOneArticle()
      getRandomLink()
    })
    const randomArticleStore = useRandomArticle()
    const getRandomOneArticle = () => {
      const params = {
        size: 1
      }
      api.getRandomArticle(params).then(({ data }) => {
        if (data.flag) {
          reactiveData.randUrl = data.data[0].id
          reactiveData.randTitle = data.data[0].articleTitle
          reactiveData.randCover = data.data[0].articleCover
          reactiveData.randArticleAbstract = data.data[0].articleAbstract
          randomArticleStore.title = data.data[0].articleTitle
          randomArticleStore.url = data.data[0].id
        }
      })
    }
    const appStore = useAppStore()
    const getRandomLink = () => {
      const params = {
        count: 10
      }
      api.getRandomLink(params).then(({ data })=>{
        if (data.flag){
          reactiveData.randomLinkList=data.data
        }
      })
    }
    return{
      ...toRefs(reactiveData),
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      })
    }
  }
})
</script>

<style scoped>
.title, .post {
    font-family: var(--top-font-family);
}

.post, .random-ten-friends, .footer-friends h6 {
    color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
    text-decoration: none;
    outline: 0;
    transition: .7s;
}

.site-footer-top {
    position: relative;
    padding: 2rem 3.5rem;
}

.footer-menu {
    display: grid;
    grid: auto / 55% 35%;
    gap: 10%;
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-divs);
}

.footer-tens {
    color: rgb(var(--color-rgb) / .6);
}

h1 {
    font-size: 48px;
}

h6 {
    font-size: 16px;
}

.footer-tens .days {
    -webkit-mask: linear-gradient(#000000e6, #00000080);
    margin-left: -0.1em;
    font-family: SmileySans;
    font-weight: 400;
    line-height: 1.25;
}

.footer-rand {
    width: min(50em, 100%);
    line-height: 2.5;
}

.footer-rand .title {
    display: block;
    opacity: .6;
    font-size: var(--font-size-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-rand img {
    position: absolute;
    left: -3.5rem;
    top: 50%;
    z-index: 1;
    width: 70vw;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    transform: translate(-15%, -50%);
    opacity: 0;
    animation: none;
    pointer-events: none;
    visibility: hidden;
    transition: .3s;
}

.footer-rand:hover img {
    opacity: .1;
    visibility: visible;
    filter: blur(10px);
}

.footer-rand:hover a {
    z-index: 2;
    position: relative;
    opacity: 1;
}

.footer-friends ul {
    display: grid;
    grid: auto / repeat(2, 1fr);
    gap: var(--gap-span) var(--gap-divs);
    margin: var(--gap-span) 0 0;
}

.footer-friends-title img {
    height: .75rem;
}

.footer-friends ul li {
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.footer-friends ul li a {
    font-family: var(--top-font-family);
    opacity: 1;
}

.footer-friends ul li a::after {
    content: "" attr(title) "";
    font-size: var(--font-size-small);
    opacity: .6;
    margin: 0 0 0 1em;
}

@media (max-width: 1024px) {
    .site-footer-top {
        padding: 1rem;
    }

    .footer-menu {
        display: flex;
        flex-direction: column;
        gap: var(--gap-divs);
    }
}
</style>
